import HeaderNav from "@/components/header-nav"
import FooterNav from "@/components/footer-nav"
import { Grid, Image, Modal } from 'antd-mobile'
import {
  BillOutline,
  BankcardOutline,
  FillinOutline,
  FileOutline,
  QuestionCircleOutline,
  AlipayCircleFill,
  ChatCheckOutline,
  HandPayCircleOutline
} from 'antd-mobile-icons'
import styles from "./index.module.less"
import { useEffect, useState } from "react"
import { showErrorToast, showSuccessToast } from '@/utils/customToast';
const { getGoodsList, getGoodsPay } = $globalServicer('My')


const My = () => {
  const [goodsList, setGoodsList] = useState([])
  const [visible, setVisible] = useState(false)
  const [payVisible, setPayVisible] = useState(false)

  const [vipContent, setVipContent] = useState('')
  const [goodsPayId, setGoodsPayId] = useState(null)
  const customNavigate = $globalNavigate()
  const fetchUserInfo = () => {

    getGoodsList().then(res => {
      setGoodsList(res)
    })
  }

  const openUrl = (url) => {
    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
    if (isMobile) {
      window.location.href = url;
    } else {
      window.open(url, '_blank', 'noopener,noreferrer');
    }
  }

  const hanldePay = (pay) => {
    console.log("🚀 ~ hanldePay ~ pay:", pay)
    if (pay.key === 'taobao') {
      setPayVisible(false)
      openUrl('https://shop.m.taobao.com/shop/shop_index.htm?shop_id=368895194&user_id=4013292613')
      return
    }
    const data = {
      type: pay.key,
      goods_id: goodsPayId,
      use_balance: pay.key === 'balance'
    }
    getGoodsPay(data).then(res => {
      if (res?.pay_info?.pay_url) {
        setPayVisible(false)
        openUrl(res?.pay_info?.pay_url)
      } else {
        showSuccessToast('支付成功')
        customNavigate('/my')
      }
    })
  }
  const handleSetGoodsPayId = (f) => {
    if (!f.is_pay) {
      showErrorToast('您已经购买超过最大次数限制，请升级会员')
      return
    }
    setGoodsPayId(f.id)
    setPayVisible(true)
    return

  }
  useEffect(() => {
    fetchUserInfo()
  }, [])
  return (
    <div className="warp">
      <div className="header">
        <HeaderNav title="会员" backArrow={true}></HeaderNav>
      </div>
      <div className={styles.goodsContent}>
        {/* <div style={{backgroundColor: 'green'}}>
          <div className={styles.user_info}>
            <div className="img">
              <Image src={userInfo?.user?.cover} 
                width={56}
                height={56}
                fit='cover'
                style={{ borderRadius: 32 }} />
            </div>
            <div className={styles.user_info_content}>
              <p className={styles.userInfoName}>{userInfo?.user?.name}</p>
              <p className={styles.userInfoName}>ID: {userInfo?.user?.id}</p>
            </div>
          </div>
          <div className={styles.userMember}>
            {
              userInfo?.user?.level_id === 0 && (
                <div className={styles.userMemberLeve0}>
                  <p className={styles.userMemberLeve0Text}>会员中心</p>
                  <p className={styles.userMemberLeve0Desc}>成为会员享用特权 <span className={styles.userMemberLeve0DescSpan}>去开通</span></p>
                </div>
              )
            }
            {
              userInfo?.user?.level_id > 0 && (
                <div className={styles.userMemberLeve}>
                  <span>会员等级2</span>
                </div>
              )
            }
          </div>
        </div> */}
        {/* <div className={styles.userInvite}>

        </div> */}
        <div>
          {
            goodsList?.map((item, index) => (
              <>
                {
                  item.direction === 2 ? <div className={styles.goodsItem} key={index}>
                    <div className={styles.goodsItemTop} style={{ backgroundImage: `url(${item?.cover})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
                      {item.name}
                    </div>
                    <div className={styles.goodsItemContent}>
                      {
                        item?.level?.map(f => (
                          <div className={styles.goodsLevelItem} style={{ backgroundImage: `url(${item?.level_cover})`, backgroundSize: 'cover', backgroundPosition: 'center' }}
                            key={f.id}
                            onClick={() => handleSetGoodsPayId(f)}
                          >
                            <p className={styles.goodsLevelItemTitle}>{f?.title}</p>
                            <div className={styles.goodsLevelItemRenewWrap}>
                              <p style={{ color: item.colour }}><span style={{ fontWeight: 900, fontSize: 27 }}>{f.price}</span></p>
                              <span className={styles.goodsLevelItemRenew} style={{ backgroundColor: item.colour, borderRadius: 14 }}>立即续费</span>
                              <p style={{ color: item.colour }} className={styles.goodsLevelItemRenewDesc} dangerouslySetInnerHTML={{ __html: f.description }}></p>
                            </div>
                          </div>
                        ))
                      }
                    </div>
                    <div className={styles.goodsItemBottom}>
                      <p style={{ color: item.colour }}
                        onClick={() => {
                          setVisible(true)
                          setVipContent(item?.description)
                        }}
                      >查看会员权益<QuestionCircleOutline fontSize={10} color={item.colour} /></p>
                    </div>
                  </div> : <>
                    <div className={styles.goodsRowItem} key={index}>
                      <div className={styles.goodsRowItemTop}>
                        <div className={styles.goodsRowItemTopTitle}>{item.name}</div>
                      </div>
                      <div className={styles.goodsRowItemContent}>
                        {
                          item?.level?.map(f => (
                            <div className={styles.goodsLevelRowItem}
                              key={f.id}
                              onClick={() => handleSetGoodsPayId(f)}
                              style={{ backgroundImage: `url(${item.level_cover})`, backgroundSize: 'cover', backgroundPosition: 'center' }}
                            >
                              <p className={styles.goodsLevelRowItemTitle}>{f.title}</p>
                              <div className={styles.goodsLevelRowItemRenewWrap}>
                                <p className={styles.goodsLevelRowItemTitleDesc}>
                                  <span className={styles.price} style={{ color: item.colour }}>¥{f.price}</span>
                                  <span className={styles.goodsLevelRowItemdesc}
                                    style={{ borderRadius: 14 }}>
                                    {f.description}
                                  </span>
                                </p>
                                <span style={{ background: item.colour }} className={styles.goodsLevelRowItemDo}>立即开通</span>
                              </div>

                            </div>
                          ))
                        }
                      </div>
                      <div className={styles.goodsItemBottom}>
                        <p style={{ color: item.colour }}
                          onClick={() => {
                            setVisible(true)
                            setVipContent(item?.description)
                          }}
                        >查看会员权益<QuestionCircleOutline fontSize={10} color={item.colour} /></p>
                      </div>
                    </div>
                  </>
                }
              </>
            ))
          }
        </div>
      </div>
      <Modal
        visible={visible}
        content={<div className={styles.vipContent} dangerouslySetInnerHTML={{ __html: vipContent }} />}
        showCloseButton={true}
        onClose={() => {
          setVisible(false)
        }}
      />
      <Modal
        visible={payVisible}
        content={<p style={{ textAlign: 'center' }}>支付</p>}
        closeOnAction={true}
        closeOnMaskClick={true}
        showCloseButton={true}
        onClose={() => {
          setPayVisible(false)
        }}
        onAction={(action) => hanldePay(action)}
        actions={[
          {
            key: 'hupijiao_wx',
            text: <p className={styles.payItemWrapper}><ChatCheckOutline fontSize={20} /><span>微信支付</span></p>,
            primary: true,
          },
          {
            key: 'taobao',
            text: <p className={styles.payItemWrapper}><HandPayCircleOutline fontSize={20} /><span>淘宝支付</span></p>,
            primary: true,
          },
          // {
          //   key: 'wxpay',
          //   text: <p className={styles.payItemWrapper}><ChatCheckOutline fontSize={20} /><span>微信支付</span></p>,
          //   primary: true,
          // },
          // {
          //   key: 'alipay',
          //   text: <p className={styles.payItemWrapper}><AlipayCircleFill fontSize={20} /><span>支付宝支付</span></p>,
          //   primary: true,
          // },
          {
            key: 'balance',
            text: <p className={styles.payItemWrapper}><BillOutline fontSize={20} /><span>余额支付</span></p>,
            primary: true,
          },
        ]}
      />
      <div className="footer">
        <FooterNav></FooterNav>
      </div>
    </div>
  );
};

export default My;
